<template>
  <div class="text-2xl" :style="fontStyle">{{ rate }}</div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

let props = withDefaults(
  defineProps<{
    value: number;
    theme: themeType;
  }>(),
  {
    value: 5,
    theme: 'orange',
  }
);

let rate = computed(() =>
  '★★★★★☆☆☆☆☆'.slice(5 - props.value, 10 - props.value)
);

const themeObj = {
  black: '#00',
  white: '#fff',
  red: '#f5222d',
  orange: '#fa541c',
  yellow: '#fadb14',
  green: '#73d13d',
  blue: '#40a9ff',
};

type themeType = keyof typeof themeObj;

const fontStyle = computed(() => {
  return `color:${themeObj[props.theme]};`;
});
</script>

<style scoped></style>
